import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

function Echar_shan() {

    const chartRef = useRef(null);

    useEffect(() => {
        // 初始化 ECharts 实例
        const myChart = echarts.init(chartRef.current);

        // 设置图表的配置项
        const option = {
            xAxis: {
                type: 'category',
                data: ['00:00', '06:00', '12:00', '18:00', '24:00']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [70, 86, 80, 88, 89, ],
                    type: 'line'
                }
            ]
        };

        // 将配置项应用到图表
        myChart.setOption(option);

        // 在组件卸载时销毁图表实例
        return () => {
            myChart.dispose();
        };
    }, []);

    return (
        <div style={{ width: '90%', marginTop: '0.3rem',backgroundColor: '#fff' }} >
            <div
                ref={chartRef}
                style={{ minHeight: '6rem' }}></div>
        </div>
    );
}

export default Echar_shan;